<template>
  <div class="document-list-section">
    <div class="section-header">
      <h3>Documents</h3>
      <div class="search-container">
        <el-input
          v-model="searchQuery"
          placeholder="Search documents"
          clearable
          @input="onSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <el-table
      :data="documents"
      style="width: 100%"
      v-loading="loading"
      @row-click="handleRowClick"
      :highlight-current-row="true"
      row-key="id"
    >
      <el-table-column prop="title" label="Title" min-width="200">
        <template #default="{ row }">
          <div class="document-title">
            <el-icon><Document /></el-icon>
            <span>{{ row.title }}</span>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="upload_date" label="Upload Date" width="180">
        <template #default="{ row }">
          {{ formatDate(row.upload_date) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="parser_status" label="Status" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusColor(row.parser_status)" size="small">
            {{ getStatusText(row.parser_status) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column label="Actions" width="200" fixed="right">
        <template #default="{ row }">
          <div class="action-buttons">
            <el-button 
              type="primary" 
              size="small" 
              @click.stop="parseDocument(row)"
              :disabled="row.parser_status === 'processing'"
            >
              <el-icon><RefreshRight /></el-icon>
              Parse
            </el-button>
            
            <el-button 
              type="success" 
              size="small" 
              @click.stop="viewQuestions(row)"
              :disabled="!canViewQuestions(row)"
            >
              <el-icon><QuestionFilled /></el-icon>
              Questions
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPageSync"
        v-model:page-size="pageSizeSync"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalDocuments"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { Search, Document, RefreshRight, QuestionFilled } from '@element-plus/icons-vue'

export default {
  name: 'DocumentListSection',
  
  components: {
    Search,
    Document,
    RefreshRight,
    QuestionFilled
  },
  
  props: {
    documents: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    totalDocuments: {
      type: Number,
      default: 0
    }
  },
  
  emits: ['size-change', 'current-change', 'parse-document', 'view-questions'],
  
  setup(props, { emit }) {
    const searchQuery = ref('')
    
    const currentPageSync = computed({
      get: () => props.currentPage,
      set: (value) => emit('current-change', value)
    })
    
    const pageSizeSync = computed({
      get: () => props.pageSize,
      set: (value) => emit('size-change', value)
    })
    
    const handleRowClick = (row) => {
      // This will select the document in the parent component
      emit('view-questions', row)
    }
    
    const handleSizeChange = (size) => {
      emit('size-change', size)
    }
    
    const handleCurrentChange = (page) => {
      emit('current-change', page)
    }
    
    const parseDocument = (document) => {
      emit('parse-document', document)
    }
    
    const viewQuestions = (document) => {
      emit('view-questions', document)
    }
    
    const onSearch = () => {
      // Reset to first page when searching
      emit('current-change', 1)
    }
    
    const formatDate = (dateString) => {
      if (!dateString) return 'N/A'
      const date = new Date(dateString)
      return date.toLocaleString()
    }
    
    const getStatusColor = (status) => {
      switch (status) {
        case 'completed':
          return 'success'
        case 'processing':
          return 'warning'
        case 'failed':
          return 'danger'
        default:
          return 'info'
      }
    }
    
    const getStatusText = (status) => {
      switch (status) {
        case 'completed':
          return 'Completed'
        case 'processing':
          return 'Processing'
        case 'failed':
          return 'Failed'
        default:
          return 'Pending'
      }
    }
    
    const canViewQuestions = (document) => {
      return document.parser_status === 'completed'
    }
    
    return {
      searchQuery,
      currentPageSync,
      pageSizeSync,
      handleRowClick,
      handleSizeChange,
      handleCurrentChange,
      parseDocument,
      viewQuestions,
      onSearch,
      formatDate,
      getStatusColor,
      getStatusText,
      canViewQuestions
    }
  }
}
</script>

<style scoped>
.document-list-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--el-text-color-primary);
}

.search-container {
  width: 300px;
}

.document-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style> 